<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分类管理 - 新闻系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .navbar {
            background-color: #0d6efd;
        }
        .category-card {
            max-width: 600px;
            margin: 2rem auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .delete-btn:hover {
            color: #dc3545 !important;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">新闻系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/root_home.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/add_class.html">添加分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/release_news.html">发布新闻</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 分类管理区域 -->
    <div class="container">
        <div class="category-card card">
            <div class="card-body">
                <!-- 现有分类展示 -->
                <h5 class="card-title mb-4">当前分类</h5>
                <div id="categoryList" class="list-group mb-4">
                    <!-- 分类项动态加载 -->
                </div>

                <!-- 添加新分类 -->
                <div class="input-group">
                    <input type="text" 
                           id="newCategory" 
                           class="form-control" 
                           placeholder="输入新分类名称">
                    <button class="btn btn-primary" id="addBtn">
                        添加分类
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS & 自定义脚本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加载分类数据
        async function loadCategories() {
            try {
                const response = await fetch('/get_class')
                if (!response.ok) throw new Error('数据加载失败')
                const { class: categories } = await response.json()
                
                // 清空现有列表
                const listContainer = document.getElementById('categoryList')
                listContainer.innerHTML = ''

                // 生成分类项
                categories.forEach(cat => {
                    const item = document.createElement('div')
                    item.className = 'list-group-item d-flex justify-content-between align-items-center'
                    item.innerHTML = `
                        ${cat}
                        <button class="btn btn-link delete-btn p-0 text-danger">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </button>
                    `
                    // 绑定删除事件
                    item.querySelector('.delete-btn').addEventListener('click', () => deleteCategory(cat))
                    listContainer.appendChild(item)
                })

            } catch (error) {
                alert(error.message)
            }
        }

        // 删除分类
        async function deleteCategory(categoryName) {
            if (!confirm(`确认删除分类 "${categoryName}" 吗？`)) return
            
            try {
                const response = await fetch('/erase_class', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ class_name: categoryName })
                })

                if (!response.ok) throw new Error('删除失败')
                loadCategories() // 刷新列表
            } catch (error) {
                alert(error.message)
            }
        }

        // 添加分类
        document.getElementById('addBtn').addEventListener('click', async () => {
            const input = document.getElementById('newCategory')
            const categoryName = input.value.trim()
            
            if (!categoryName) {
                alert('请输入分类名称')
                return
            }

            try {
                const response = await fetch('/add_class', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ class_name: categoryName })
                })

                if (!response.ok) throw new Error('添加失败')
                input.value = '' // 清空输入框
                loadCategories() // 刷新列表
            } catch (error) {
                alert(error.message)
            }
        })

        // 初始化加载
        window.addEventListener('DOMContentLoaded', loadCategories)
    </script>
</body>
</html>